import { Navigate } from 'react-router-dom'
import { lazy, Suspense } from 'react'

// 用lazy实现懒加载
var Index = lazy(() => import('../views/Index'))
var Login = lazy(() => import('../views/Login'))
var NotFound = lazy(() => import('../views/NotFound'))
var Register = lazy(() => import('../views/Register'))


var Home = lazy(() => import('../views/Index/Home'))
var Custommange = lazy(() => import('../views/Index/Custommange'))
var Servicecenter = lazy(() => import('../views/Index/Servicecenter'))
var Staffcenter = lazy(() => import('../views/Index/Staffcenter'))
var Systemmange = lazy(() => import('../views/Index/Systemmange'))

var Staffmanage = lazy(() => import('../components/Staffcenter/Staffmanage'))
var Rolemanage = lazy(() => import('../components/Staffcenter/Rolemanage'))
var Customcenter = lazy(() => import('../components/Custommange/Customcenter'))

var Systemdata = lazy(() => import('../components/Systemmange/Systemdata'))
var Systemhistorydata = lazy(() => import('../components/Systemmange/Systemhistorydata'))


// 封装一个函数式组件（高阶组件）,用该组件包裹需要处理的组件，确保每个二级路由，三级路由组件外面都包裹一个Suspense，都有懒加载效果
function AuthComponent({ children, permission }) {

    // 获取当前用户的权限列表
    var permissions = localStorage.getItem('userinfo') ?
        JSON.parse(localStorage.getItem('userinfo')).role.permissions : [];
    // console.log(JSON.parse(localStorage.getItem('userinfo')).role.permissions);

    // 判断当前用户是否有权限访问该路由对应的组件
    var res = permission && permissions.includes(permission)
    return (
        <Suspense fallback={<div>loading...</div>}>
            {
                res ?
                    children :
                    <NotFound />
            }
        </Suspense>
    )
}

var routes = [
    // 首页
    {
        path: '/index',
        element: <Index />,
        children: [
            {
                path: '/index/home',
                element: < AuthComponent permission={11}><Home /></AuthComponent>,
            },
            {
                path: '/index/servicecenter',
                element: < AuthComponent permission={12}><Servicecenter /></AuthComponent>,
            },
            {
                path: '/index/staffcenter',
                element: < AuthComponent permission={13}><Staffcenter /></AuthComponent>,
                children: [
                    {
                        path: '/index/staffcenter/staffmanage',
                        element: <AuthComponent permission={131} ><Staffmanage /></AuthComponent>
                    },
                    {
                        path: '/index/staffcenter/rolemanage',
                        element: <AuthComponent permission={132} ><Rolemanage /></AuthComponent>
                    },
                    {
                        path: '/index/staffcenter',
                        element: <Navigate to="/index/staffcenter/staffmanage" />
                    },
                    {
                        path: '*',
                        element: <NotFound />
                    },
                ]
            },
            {
                path: '/index/custommange',
                element: < AuthComponent permission={14}><Custommange /></AuthComponent>,
                children: [
                    {
                        path: '/index/custommange/staffmanage',
                        element: <AuthComponent permission={141} ><Customcenter /></AuthComponent>
                    },
                    {
                        path: '/index/custommange',
                        element: <Navigate to="/index/custommange/staffmanage" />
                    },
                    {
                        path: '*',
                        element: <NotFound />
                    },
                ]
            },
            {
                path: '/index/systemmange',
                element: < AuthComponent permission={15}><Systemmange /></AuthComponent>,
                children: [
                    {
                        path: '/index/systemmange/systemdata',
                        element: <AuthComponent permission={151} ><Systemdata /></AuthComponent>
                    },
                    {
                        path: '/index/systemmange/systemhistorydata',
                        element: <AuthComponent permission={151} ><Systemhistorydata /></AuthComponent>
                    },
                    {
                        path: '/index/systemmange',
                        element: <Navigate to="/index/systemmange/systemdata" />
                    },
                    {
                        path: '*',
                        element: <NotFound />
                    },
                ]
            },
            // 重定向
            {
                path: '/index',
                element: <Navigate to="/index/home" />
            },
            // 404
            {
                path: '*',
                element: <NotFound />
            }
        ]
    },
    // 登录页
    {
        path: '/login',
        element: <Login />
    },
    // 注册页
    {
        path: '/register',
        element: <Register />
    },
    // 重定向
    {
        path: '/',
        element: <Navigate to="/index" />
    },
    // 404
    {
        path: '*',
        element: <NotFound />
    }
]

export default routes